<html lang="zh">

<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"
        type="text/javascript"></script>
    <title>HmacSHA1 签名</title>
    <script type="text/javascript">
        function encryptor() {
            var appId = 'e3099381aad342c7b6a93247c5d189e0';
            var appSecret = 'EFFC2B88-9156-44F7-AC70-5C0E4701EED2';
            var timestamp = parseInt((new Date()).getTime());
            var converttext = appId + "\n" + appSecret + "\n" + timestamp;

            var plaintext = $("#plaintext").val(converttext);

            var ciphetext = CryptoJS.HmacSHA1(
                CryptoJS.enc.Utf8.parse(converttext),
                CryptoJS.enc.Utf8.parse(appSecret)
            ).toString(CryptoJS.enc.Base64);

            $("#ciphetext").val(ciphetext);

            $("#app_id").text('appId: ' + appId);
            $("#timestamp").text('timestamp: ' + timestamp);
            $("#signature").text('signature: ' + ciphetext);
        }
    </script>
    <style>
        h,
        div {
            margin: 10px 10px;
        }

        input[type=text] {
            width: 500px;
        }

        input[type=button] {
            margin: 0px 5px;
            padding: 10px;
        }

        select {
            width: 250px;
        }

        textarea {
            width: 500px;
            height: 150px;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <h>HmacSHA1 签名</h>
        </div>
        <div>
            <input type="button" value="生成签名" onclick="encryptor()" />
        </div>
        <div>
            <label for="plaintext">明文：</label>
            <br />
            <textarea id="plaintext" readonly="readonly"></textarea>
        </div>
        <div>
            <label for="ciphetext">签名结果：</label>
            <br />
            <textarea id="ciphetext" readonly="readonly"></textarea>
        </div>
        <div id="app_id"></div>
        <div id="timestamp"></div>
        <div id="signature"></div>
    </div>
</body>

</html>